<!-- 案例轮播列表 -->
<template>
    <div v-loading="bannerLoading" class="case-box">
        <h4>案例</h4>
        <div v-if="!bannerLoading && list.length === 0 && !isEditor" class="no-data">
            <span class="icon icon-no-data">
                <span>暂无案例</span>
            </span>
        </div>
        <el-carousel
            v-if="list.length > 0 || isEditor"
            :interval="40000"
            type="card"
            height="314px"
            arrow="never"
            @change="indexChange"
        >
            <el-carousel-item v-for="(item, index) in list" :key="index" :class="currItemClass(index)">
                <div v-if="item.isAddBtn" class="case-item" @click="jumpCenter">
                    <add-btn btn-name="新建案例" btn-width="420px" btn-height="314px" text-color="#333"></add-btn>
                </div>
                <nuxt-link v-else class="case-item" :to="`/qiao/s/shop/${shopId}/case/${item.id}`">
                    <img :src="parseImgUrl(item)" alt="">
                    <div class="case-info">
                        <h5>{{item.exampleName}}</h5>
                        <p class="p-main">
                            {{pareInfo(item.exampleInfo)}}
                        </p>
                        <h6>{{item.productName}}</h6>
                        <p v-if="item.exampleLabel" class="p-span">
                            <span v-for="(litem, lindex) in item.exampleLabel.split(',')" :key="lindex">{{litem}}</span>
                        </p>
                    </div>
                </nuxt-link>
            </el-carousel-item>
        </el-carousel>
        <div v-if="total > 0" class="drop-btn">
            <el-button type="text" @click="isDropdown = !isDropdown">
                {{isDropdown ? '展开' : '收起'}}更多
                <i :class="`el-icon-arrow-${isDropdown ? 'down' : 'up'}`"></i>
            </el-button>
        </div>
        <div v-if="total > 0 && !isDropdown" v-loading="loading" class="ls-group">
            <el-row>
                <el-col v-for="(eitme, eindex) in tableList" :key="eindex" :span="6">
                    <nuxt-link class="lt-item" :to="`/qiao/s/shop/${shopId}/case/${eitme.id}`">
                        <div class="lt-img">
                            <img :src="parseImgUrl(eitme)" alt="">
                        </div>
                        <div class="case-info">
                            <h5>{{eitme.exampleName}}</h5>
                            <p>{{pareInfo(eitme.exampleInfo)}}</p>
                            <h6>{{eitme.productName}}</h6>
                        </div>
                    </nuxt-link>
                </el-col>
            </el-row>
            <div v-if="total > 0" style="text-align: center; padding: 20px 0;">
                <el-pagination
                    class="public-page"
                    background
                    :current-page="search.pageNum"
                    :page-size="search.pageSize"
                    :total="total"
                    prev-text="上一页"
                    next-text="下一页"
                    layout="prev, pager, next"
                    @current-change="pageChange"
                ></el-pagination>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import {
    Vue,
    Prop,
    Watch,
    Component
} from 'nuxt-property-decorator'
import addBtn from './addbtn.vue'
import {ciipWebUrl, serFileUrl} from '~/../config/server.url.conf'
import {getCaseList} from '~/api/shop'
@Component({
    name: 'caseList',
    components: {
        addBtn
    }
})
export default class CaseList extends Vue {
    @Prop()
    shopId!: number
    @Prop({
        type: Boolean,
        default: false
    })
    isEditor!: boolean
    serFileUrl: string = serFileUrl
    isDropdown: boolean = true
    bannerLoading: boolean = true
    loading: boolean = false
    total: number = 0
    search: any = {
        pageNum: 1,
        pageSize: 8,
        shopId: ''
    }
    initialIndex: number = 0
    list: any = []
    tableList: any = []
    @Watch('isDropdown', {immediate: false, deep: true})
    changeDropdown (nv: boolean) {
        if (!nv && this.tableList.length === 0) {
            this.getList()
        }
    }
    currItemClass (index: number) {
        let cl: string = ''
        const len: number = this.list.length
        const cindex: number = this.initialIndex
        if (
            index < cindex
        ) {
            if (cindex === len - 1 && index === 0 && len > 2) {
                cl = 'item-after'
            } else {
                cl = 'item-before'
            }
        }
        if (index > cindex) {
            if (cindex === 0 && index === len - 1 && len > 2) {
                cl = 'item-before'
            } else {
                cl = 'item-after'
            }
        }
        return cl
    }
    indexChange (index: number) {
        this.initialIndex = index
    }
    async getList (isBannerList?: boolean) {
        const search = {...this.search}
        if (isBannerList) {
            search.pageSize = 6
            search.pageNum = 1
        } else if (search.pageNum === 1) {
            search.pageSize += 6
        }
        this[isBannerList ? 'bannerLoading' : 'loading'] = true
        const {data}: any = await getCaseList(search)
        if (data.flag) {
            let arr = data.data.content
            let total = data.data.totalElements || 0
            if (total > 6) {
                total = total - 6
            } else {
                total = 0
            }
            this.total = total
            if (isBannerList) {
                if (this.isEditor) {
                    arr = [{isAddBtn: true}, ...arr]
                }
                this.list = arr
            } else {
                if (search.pageNum === 1) {
                    if (arr.length > 6) {
                        arr = arr.slice(6, arr.length)
                    } else {
                        arr = []
                    }
                }
                this.tableList = arr
            }
        }
        this[isBannerList ? 'bannerLoading' : 'loading'] = false
    }
    pageChange (val: number) {
        this.search.pageNum = val
        this.getList()
    }
    pareInfo (info: string) {
        return info.replace(/<\/?.+?\/?>/g, '')
    }
    jumpCenter () {
        window.location.href = ciipWebUrl + '/business/case?t=second'
    }
    parseImgUrl (item: any) {
        const str = item.examplePictureUrl
        let url = ''
        if (str) {
            url = str.split(',')[0]
        }
        return this.serFileUrl + url
    }
    @Watch('shopId', {immediate: true, deep: true})
    shopIdChange (nv: number) {
        if (nv) {
            this.search.shopId = nv
            this.getList(true)
        }
    }
}
</script>

<style scoped lang="scss">
    @mixin word-sign-line {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .case-box{
        background-color: #fff;
        border-radius: 4px;
        margin-top: 24px;
        padding-bottom: 24px;
        h4{
            text-align: center;
            font-size: 20px;
            color: #333333;
            line-height: 90px;
        }
    }
    .case-item{
        width: 420px;
        height: 314px;
        position: relative;
        border-radius: 4px;
        overflow: hidden;
        display: inline-block;
        background-color: #f5f5f5;
        img{
            width: 100%;
            height: 100%;
        }
        .case-info{
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: rgba(17, 169, 232, 0.9);
            opacity: 0;
            top: 0;
            left: 0;
            color: #fff;
            font-size: 14px;
            line-height: 24px;
            padding: 20px 36px;
            text-align: left;
            h5{
                font-size: 16px;
                padding: 10px 0;
                @include word-sign-line;
            }
            h6{
                padding: 20px 0 15px;
                font-size: 14px;
                @include word-sign-line;
            }
            p{
                padding: 5px 0;
                &.p-main{
                    max-height: 120px;
                    overflow: hidden;
                }
                &.p-span{
                    font-size: 12px;
                    span{
                        padding: 4px 14px;
                        border: 1px solid #fff;
                        border-radius: 2px;
                        margin-right: 16px;
                    }
                }
            }
        }
        &:hover{
            .case-info{
                opacity: 1;
            }
        }
    }
    .ls-group{
        .el-row{
            padding: 0 12px;
            .el-col{
                padding: 12px;
            }
        }
        .lt-item{
            .lt-img{
                border-radius: 4px;
                width: 100%;
                background-color: #f5f5f5;
                padding-bottom: 75%;
                position: relative;
                overflow: hidden;
                img{
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    top: 0;
                    left: 0;
                }
            }
            .case-info{
                font-size: 14px;
                line-height: 14px;
                height: 108px;
                p,
                h6,
                h5{
                    @include word-sign-line;
                }
                p{
                    font-size: 14px;
                    color: #999;
                }
                h5{
                    font-size: 16px;
                    color: #333;
                    padding-top: 20px;
                    padding-bottom: 14px;
                }
                h6{
                    font-size: 14px;
                    color: #666;
                    padding-top: 24px;
                }
            }
        }
    }
</style>

<style lang="scss">
    .case-box{
        .el-carousel{
            .el-carousel__indicators{
                left: auto;
                right: 24px;
                transform: translateX(0);
                bottom: 4px;
                padding-top: 12px;
                .el-carousel__button{
                    width: 8px;
                    height: 6px;
                    border-radius: 3px;
                    opacity: 1;
                    background-color: #d6d6d6;
                }
                .is-active .el-carousel__button{
                    width: 16px;
                    background-color: #999;
                }
            }
            .el-carousel__item{
                &.is-active {
                    text-align: center;
                }
                &.item-after{
                    text-align: right;
                }
                &.item-before{
                    text-align: left;
                }
            }
        }
        .drop-btn{
            text-align: center;
            margin-bottom: 16px;
            .el-button{
                color: $blue;
                font-size: 20px;
            }
        }
    }
</style>
